<!doctype html>
<html>
<!--
Copyright 2013 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.labs.gestures boxes</title>
  <script src="../../base.js"></script>
  <script>
    goog.require('goog.debug.DivConsole');
    goog.require('goog.debug.Logger');
    goog.require('goog.dom');
    goog.require('goog.dom.classes');
    goog.require('goog.events');
    goog.require('goog.events.EventType');
    goog.require('goog.labs.gestures');
  </script>
  <link rel="stylesheet" href="../css/demo.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style>
    body {
      -webkit-user-select: none;
    }
    #container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    .box {
      position: absolute;
      z-index: 0;

      border: 2px solid #AAAAAA;
      background-color: #666666;
    }
    .box-tapped {
      border-color: #663333;
    }
    .box-panning {
      border-color: #336633;
    }
    .box-pinching {
      border-color: #333366;
    }
    .box-rotating {
      border-color: #666633;
    }
  </style>
</head>
<body>
  <h1>goog.labs.gestures</h1>
  <div>
    Move/pinch/rotate the boxes. Only supported on touch devices.
  </div>
  <fieldset class="goog-debug-panel">
    <legend>Event log</legend>
    <div class="log" id="log"></div>
  </fieldset>

  <div id="container">
  </div>

  <script>
    var logger = goog.debug.Logger.getLogger('gestures');
    new goog.debug.DivConsole(goog.dom.getElement('log')).setCapturing(true);

    // Prevent scrolling and things like the ChromeOS gestures.
    goog.events.listen(document.body, goog.events.EventType.TOUCHSTART,
        function(e) {
          e.preventDefault();
        });
    goog.events.listen(document.body, goog.events.EventType.TOUCHMOVE,
        function(e) {
          e.preventDefault();
        });

    function updateTransform(box, tx, ty, scale, angle) {
      // This copied from goog.style.getCssTranslation. It'd be nice to have
      // this in goog.style and much more robust.
      var transformName;
      if (goog.userAgent.IE) {
        transformName = '-ms-transform';
      } else if (goog.userAgent.WEBKIT) {
        transformName = '-webkit-transform';
      } else if (goog.userAgent.OPERA) {
        transformName = '-o-transform';
      } else if (goog.userAgent.GECKO) {
        transformName = '-moz-transform';
      } else {
        transformName = 'transform';
      }
      goog.style.setStyle(box, transformName,
          'translateZ(0) translate(' + tx + 'px,' + ty + 'px) ' +
          'scale(' + scale + ') rotate(' + angle + 'rad)');
    };

    // All boxes in their z-order.
    var order = [];
    var container = document.getElementById('container');
    function addBox(width, height, color) {
      var ordinal = order.length;

      var box = goog.dom.createElement(goog.dom.TagName.DIV);
      box.className = 'box';
      goog.style.setStyle(box, {
        'width': width + 'px',
        'height': height + 'px',
        'z-index': ordinal,
        'background-color': color
      });
      goog.style.setUnselectable(box, true);
      container.appendChild(box);
      order.push(box);

      var stx = 0;
      var sty = 0;
      var tx = 0;
      var ty = 0;
      var scale = 1;
      var angle = 0;
      updateTransform(box, tx, ty, scale, angle);

      function reorder() {
        order.splice(order.indexOf(box), 1);
        order.push(box);
        for (var n = 0; n < order.length; n++) {
          order[n].style.zIndex = n;
        }
      };

      var tapGesture = goog.labs.gestures.attachTapGesture(box,
          function(gesture) {
            if (gesture.getState() == goog.labs.gestures.State.RECOGNIZED) {
              logger.info('bringing box ' + ordinal + ' to the front');
              reorder();
            }
          });
      var panGesture = goog.labs.gestures.attachPanGesture(box,
          function(gesture) {
            switch (gesture.getState()) {
              case goog.labs.gestures.State.BEGAN:
                stx = tx;
                sty = ty;
                goog.dom.classes.add(box, 'box-panning');
                logger.info('began panning box ' + ordinal);
                break;
              case goog.labs.gestures.State.CHANGED:
                tx = stx + gesture.getTranslationX();
                ty = sty + gesture.getTranslationY();
                updateTransform(box, tx, ty, scale, angle);
                break;
              case goog.labs.gestures.State.ENDED:
                logger.info('ended panning box ' + ordinal);
                goog.dom.classes.remove(box, 'box-panning');
                break;
            }
          });
      var pinchGesture = goog.labs.gestures.attachPinchGesture(box,
          function(gesture) {
            switch (gesture.getState()) {
              case goog.labs.gestures.State.BEGAN:
                goog.dom.classes.add(box, 'box-pinching');
                logger.info('began pinching box ' + ordinal);
                break;
              case goog.labs.gestures.State.CHANGED:
                scale *= gesture.getScalingDelta();
                updateTransform(box, tx, ty, scale, angle);
                break;
              case goog.labs.gestures.State.ENDED:
                logger.info('ended pinching box ' + ordinal);
                goog.dom.classes.remove(box, 'box-pinching');
                break;
            }
          });
      var rotateGesture = goog.labs.gestures.attachRotateGesture(box,
          function(gesture) {
            switch (gesture.getState()) {
              case goog.labs.gestures.State.BEGAN:
                goog.dom.classes.add(box, 'box-rotating');
                logger.info('began rotating box ' + ordinal);
                break;
              case goog.labs.gestures.State.CHANGED:
                angle += gesture.getRotationDelta();
                updateTransform(box, tx, ty, scale, angle);
                break;
              case goog.labs.gestures.State.ENDED:
                logger.info('ended rotating box ' + ordinal);
                goog.dom.classes.remove(box, 'box-rotating');
                break;
            }
          });

      // Allow all gestures to recognize together.
      goog.labs.gestures.allowSimultaneousRecognition(
          panGesture, pinchGesture, rotateGesture);
    };

    addBox(340, 340, 'orange');
    addBox(340, 216, 'purple');
    addBox(340, 226, 'green');
  </script>
</body>
</html>
